Tree V2 虚拟化树形控件

您所在的位置：网站首页 › el tree设置默认展开 › Tree V2 虚拟化树形控件

Tree V2 虚拟化树形控件

2024-07-16 09:31| 来源: 网络整理| 查看: 265

Tree V2 虚拟化树形控件beta #

不论你的数据量多大，虚拟树都能毫无压力地处理。

基础用法 #

基础的树形结构展示

可选择的虚拟树 #

适用于需要选择层级时使用。

禁用复选框 #

节点的复选框可以设置为禁用。

默认扩展和默认检查 #

树节点可以在初始化阶段被设置为展开或选中。

自定义节点内容 #

节点的内容支持自定义，可以在节点区添加按钮或图标等内容

节点过滤 #

树节点可以过滤

TreeV2 属性 #属性名说明类型默认值data展示数据array—empty-text内容为空的时候展示的文本string—props配置选项，具体看下表object—highlight-current是否高亮当前选中节点booleanfalseexpand-on-click-node是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点booleantruecheck-on-click-node是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点booleanfalsedefault-expanded-keys默认展开的节点的 key 的数组array—show-checkbox节点是否可被选择booleanfalsecheck-strictly在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 falsebooleanfalsedefault-checked-keys默认勾选的节点的 key 的数组array—current-node-key当前选中的节点string / number—filter-method对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏Function(value, data)—indent相邻级节点间的水平缩进，单位为像素number16icon自定义树节点的图标string | Component—item-size 2.2.33自定义树节点的高度number26props #属性说明类型默认值value每个树节点用来作为唯一标识的属性，在整棵树中应该是唯一的string, numberidlabel指定节点标签为节点对象的某个属性值stringlabelchildren指定子树为节点对象的某个属性值stringchildrendisabled指定节点选择框是否禁用为节点对象的某个属性值stringdisabledTreeV2 方法 #

Tree内部使用TreeNode类型的对象来包装用户传入的数据，用来构造树节点之间的关系。 Tree 暴露了以下方法：

方法说明参数filter对树节点进行筛选操作(query: string)getCheckedNodes若节点可被选择（即show-checkbox为 true），则返回目前被选中的节点所组成的数组(leafOnly: boolean)getCheckedKeys若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组(leafOnly: boolean)setCheckedKeys通过 keys 设置目前勾选的节点(keys: TreeKey[])setChecked通过 key 设置某个节点的勾选状态(key: TreeKey, checked: boolean)setExpandedKeys设置当前展开的节点(keys: TreeKey[])getHalfCheckedNodes如果节点可用被选中 (show-checkbox 为 true), 它将返回当前半选中的节点组成的数组—getHalfCheckedKeys若节点可被选中(show-checkbox 为 true)，则返回目前半选中的节点的 key 所组成的数组—getCurrentKey获取当前被选中节点的 key，若没有节点被选中则返回 undefined—getCurrentNode获取当前被选中节点的 data，若没有节点被选中则返回 undefined—setCurrentKey通过 key 设置某个节点的当前选中状态(key: TreeKey)getNode通过 key 或 data 获取节点(data: TreeKey | TreeNodeData)expandNode展开指定节点(node: TreeNode)collapseNode折叠指定节点(node: TreeNode)setData当数据量非常庞大的时候，总是使用响应式数据将导致性能表现不佳，所以我们提供一种显式设置的方式来避免此种情况(data: TreeData)TreeV2 事件 #事件名说明参数node-click当节点被点击的时候触发(data: TreeNodeData, node: TreeNode, e: MouseEvent)node-contextmenu当节点被鼠标右键点击时会触发该事件(e: Event, data: TreeNodeData, node: TreeNode)check-change节点选中状态发生变化时的回调(data: TreeNodeData, checked: boolean)check当复选框被点击的时候触发(data: TreeNodeData, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData,})current-change当前选中节点变化时触发的事件(data: TreeNodeData, node: TreeNode)node-expand节点被展开时触发的事件(data: TreeNodeData, node: TreeNode)node-collapse节点被收起时触发的事件(data: TreeNodeData, node: TreeNode)TreeV2 插槽 #名称说明-自定义树节点的内容。作用域参数为 { node: TreeNode, data: TreeNodeData }源代码 #

组件 • 文档

贡献者 #